<template>
  <Select @change="change" v-bind="$attrs">
    <SelectOption v-for="(item, index) in userList" :key="index" :value="item.userAccount">{{
      item.userName
    }}</SelectOption>
  </Select>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Select } from 'ant-design-vue';
  import { AllUserListApi } from '/@/api/common/index';
  import { UserItem } from '../api/common/model';
  export default defineComponent({
    name: 'UserSelect',
    components: {
      Select,
      SelectOption: Select.Option,
    },
    emits: ['getUserItem', 'change'],
    setup(_, { emit }) {
      let userList = ref<UserItem[]>([]);

      function getAllUserList() {
        AllUserListApi().then((res) => {
          if (res.code === 200) {
            userList.value = res.data;
          }
        });
      }
      getAllUserList();

      function change(value) {
        emit('change', value);
        const userItem = userList.value.find((item) => item.userAccount === value);
        emit('getUserItem', userItem);
      }

      return {
        userList,
        change,
      };
    },
  });
</script>
<style lang="less" scoped></style>
